<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变 - 不同尺寸大小关键字的使用</title>
    <style type="text/css">
        div.closest-side {
            width: 300px;
            height: 200px;
            margin: 50px;
            background: -webkit-radial-gradient(30% 70%, closest-side, red, blue);
            background: -moz-radial-gradient(30% 70%, closest-side, red, blue);
            background: -o-radial-gradient(30% 70%, closest-side, red, blue);
            background: radial-gradient(30% 70%, closest-side, red, blue);
        }

        div.farthest-side {
            width: 300px;
            height: 200px;
            margin: 50px;
            background: -webkit-radial-gradient(30% 70%, farthest-side, red, blue);
            background: -moz-radial-gradient(30% 70%, farthest-side, red, blue);
            background: -o-radial-gradient(30% 70%, farthest-side, red, blue);
            background: radial-gradient(30% 70%, farthest-side, red, blue);
        }

        div.closest-corner {
            width: 300px;
            height: 200px;
            margin: 50px;
            background: -webkit-radial-gradient(30% 70%, closest-corner, red, blue);
            background: -moz-radial-gradient(30% 70%, closest-corner, red, blue);
            background: -o-radial-gradient(30% 70%, closest-corner, red, blue);
            background: radial-gradient(30% 70%, closest-corner, red, blue);
        }

        div.farthest-corner {
            width: 300px;
            height: 200px;
            margin: 50px;
            background: -webkit-radial-gradient(30% 70%, farthest-corner, red, blue);
            background: -moz-radial-gradient(30% 70%, farthest-corner, red, blue);
            background: -o-radial-gradient(30% 70%, farthest-corner, red, blue);
            background: radial-gradient(30% 70%, farthest-corner, red, blue);
        }
    </style>
</head>
<body>
<div class="closest-side"></div>
<div class="farthest-side"></div>
<div class="closest-corner"></div>
<div class="farthest-corner"></div>
</body>
</html>